<template>
    <n-spin size="large" :show="loading">
        <n-space vertical :size="24">
            <n-form label-placement="left" inline :show-feedback="false">
                <n-grid :cols="9" :x-gap="24">
                    <n-form-item-gi :span="4" label="城市">
                        <District v-model:code="area"></District>
                    </n-form-item-gi>
                    <n-form-item-gi :span="4">
                        <n-select
                            filterable
                            placeholder="请选择门店"
                            :disabled="mchs.length == 0"
                            :options="mchs"
                            @update:value="(v:string) => {
                                param.pager.page = 1
                                param.query.mchid = v
                                execLoad()
                            }"
                        />
                    </n-form-item-gi>
                    <n-form-item-gi :span="1">
                        <n-button @click="execLoad">
                            <template #icon>
                                <n-icon :component="YoutubeSearchedForRound" />
                            </template>
                            刷新
                        </n-button>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
            <n-data-table striped size="large" :row-props="rowProps" :max-height="height" :min-height="items.length > 0 ? height : 0" :row-key="(row:any) => row.id" :columns="columns" :data="items" />
            <n-space justify="end">
                <n-pagination show-size-picker :page="param.pager.page" :page-size="param.pager.size" :page-count="pager.all" :page-sizes="[10, 25, 50, 100]" @update:page="onChangePage" @update:page-size="onChangeSize">
                    <template #prefix="{}">当前 {{ pager.now }} / {{ pager.all }} 页，共 {{ pager.row }} 条数据</template>
                </n-pagination>
            </n-space>
        </n-space>

        <View :item="data" v-model:show="viewActive" v-if="viewActive" @refresh="execLoad"></View>
    </n-spin>
</template>

<script lang="ts" setup>
import { h, ref, computed, onActivated, watch } from 'vue'
import { NSpace, NText, NButton, NTag } from 'naive-ui'
import District from '@/comp/func/District.vue'
import { YoutubeSearchedForRound } from '@vicons/material'

import { useStore } from '@/store'
import { Http } from '@/libs'

import View from './View.vue'

const store = useStore()
const loading = computed(() => store.state.loading.flag)
const height = computed(() => store.state.browser.innerHeight - 330)

const area = ref<string | undefined>(undefined)
watch(area, (nv, _ov) => {
    execLoadMchs(nv)
    param.value.pager.page = 1
    param.value.query.area = nv + ''
    execLoad()
})

const mchs = ref<any>([])

const execLoadMchs = (code: any) => {
    mchs.value = []
    Http.post('/ops/biz/merchant/info/query', {
        area: code + '',
        name: '',
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        mchs.value = resp.data.items.map((m: any) => {
            return {
                label: `[${m.id}] ${m.name} - ${m.full}`,
                value: m.id,
            }
        })
    })
    execLoad()
}
const rowProps = (row: any) => {
    return {
        style: 'cursor: pointer;',
        onClick: () => {
            data.value = row
            viewActive.value = true
        },
    }
}
const columns = [
    {
        title: '车辆信息',
        key: 'name',
        align: 'left',
        width: 350,
        ellipsis: {
            tooltip: false,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(
                NButton,
                {
                    tertiary: true,
                    type: 'info',
                    style: { width: '100px', textAlign: 'center' },
                },
                { default: () => 'C' + row.id }
            )
            comps[comps.length] = h('span', {}, { default: () => row.cno })
            comps[comps.length] = h('span', {}, { default: () => row.name })
            return h(NSpace, { wrap: false, align: 'center' }, { default: () => comps })
        },
    },
    {
        title: '车辆参数',
        key: 'attr',
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(NText, {}, { default: () => row.attr.liter })
            comps[comps.length] = h(NText, {}, { default: () => row.attr.seat + '座' })
            comps[comps.length] = h(NText, {}, { default: () => row.attr.color })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '所属门店',
        key: 'name',
        align: 'left',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(NText, {}, { default: () => row.merchant.name })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '终端价',
        key: 'price.mdp',
        align: 'left',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(NText, {}, { default: () => (row.price.mdp / 100).toFixed(2) + ' 元/日' })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '同行价',
        key: 'price.mdp',
        align: 'left',
        width: 250,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => (row.price.pdp / 100).toFixed(2) + ' 元/日' })
            comps[comps.length] = h('span', {}, { default: () => (row.price.pmp / 100).toFixed(2) + ' 元/月' })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '车辆性质',
        key: 'price.type',
        align: 'left',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            if (row.type == 1) {
                comps[comps.length] = h(NText, {}, { default: () => '门店' })
            }
            if (row.type == 2) {
                comps[comps.length] = h(NText, {}, { default: () => '合伙' })
                comps[comps.length] = h(NText, {}, { default: () => row.count + '人' })
            }
            if (row.type == 3) {
                comps[comps.length] = h(NText, {}, { default: () => '挂靠' })
                comps[comps.length] = h(NText, {}, { default: () => row.count + '人' })
            }
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '车辆状态',
        key: 'bind',
        align: 'center',
        width: 100,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            if (row.audit.state == 2) {
                if (row.stop) {
                    comps[comps.length] = h(NTag, { type: 'error' }, { default: () => '已停租' })
                }
                if (!row.stop && row.idle && row.upper) {
                    comps[comps.length] = h(NTag, { type: 'warning' }, { default: () => '空闲中' })
                }
                if (!row.stop && row.temp) {
                    comps[comps.length] = h(NTag, { type: 'info' }, { default: () => '临时车' })
                }
                if (!row.stop && !row.idle) {
                    comps[comps.length] = h(NTag, { type: 'success' }, { default: () => '租赁中' })
                }
                if (!row.stop && !row.upper) {
                    comps[comps.length] = h(NTag, { type: 'error' }, { default: () => '未上架' })
                }
            } else if (row.audit.state == 3) {
                comps[comps.length] = h('span', {}, { default: () => '已驳回' })
            } else {
                comps[comps.length] = h('span', {}, { default: () => '未审核' })
            }
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
]

const onChangeSize = (size: number) => {
    param.value.pager.page = 1
    param.value.pager.size = size
    execLoad()
}

const onChangePage = (page: number) => {
    param.value.pager.page = page
    execLoad()
}

const param = ref({
    query: {
        area: '',
        mchid: '',
    },
    pager: {
        page: 1,
        size: 10,
        time: new Date().getTime(),
    },
})

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref([])

const execLoad = () => {
    Http.post('/ops/biz/car/list', param.value).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        pager.value = resp.data.pager
        items.value = resp.data.items
    })
}

const data = ref<any>({})

const viewActive = ref(false)

onActivated(() => {
    execLoad()
})
</script>
